<template>
  <div style="display: flex;flex-wrap: wrap">
    <div style="float: left;width: 40%">
      <el-card
        ref="Pmessage"
        class="box-card"
        shadow="hover"
      >
        <div slot="header" class="clearfix">
          <span>个人信息</span>
        </div>
        <div class="user">
          <img :src="urlImg" />
          <div class="userInfo">
            <p class="name">{{ username }}</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登陆时间：<span>2021-7-19</span></p>
          <p>上次登陆地点：<span>江门市</span></p>
        </div>
        <div>
          <div class="card-text">
            <span>用户名：</span>
            <div style="float: right">{{username}}</div>
          </div>
          <div class="card-text">
            <span>学号：</span>
            <div style="float: right">{{stuNumber}}</div>
          </div>
          <div class="card-text">
            <span>学院：</span>
            <div style="float: right">{{college}}</div>
          </div>
          <div class="card-text">
            <span>年级：</span>
            <div style="float: right">{{grade}}</div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="from">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <Information></Information>
        </el-tab-pane>
        <el-tab-pane label="密码修改" name="second">
          <password-settings></password-settings>
        </el-tab-pane>
        <el-tab-pane label="最近登陆" name="third">
          <Recently></Recently>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PasswordSettings from '@/components/ProfileSubpage/PasswordSettings';
import Information from '@/components/ProfileSubpage/Information';
import Recently from '@/components/ProfileSubpage/Recently';
import Cookies from 'js-cookie';
export default {
  name: 'Profile',
  components: {
    PasswordSettings,
    Information,
    Recently
  },
  data() {
    return {
      urlImg: require("../assets/app_header/tx.png"),
      activeName: 'first',
      username: JSON.parse(Cookies.get('userId')).username,
      stuNumber: JSON.parse(Cookies.get('userId')).stuNumber,
      college: JSON.parse(Cookies.get('userId')).college,
      grade: JSON.parse(Cookies.get('userId')).grade
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },

}
</script>

<style scoped>
.user{
  display: flex;
  align-items: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cccccc;
}
img{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-right: 40px;
}
.userInfo{float: right;}
.name{
  font-size: 32px;
  margin-bottom: 10px;
}
.access{color: #9999;}
.login-info p{
  line-height: 28px;
  font-size: 14px;
  color: #999999;
  }
.login-info span{
  color: #66666;
  margin-left: 60px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  /*width: 50%;*/
  padding: 20px;
}

.card-text {
  height: 40px;
  font-size: 15px;
  padding-top: 10px;
  border-bottom: 1px solid #cccccc;
}
  .from{
    float: right;
    width: 50%;
    margin-left: 20px;
    background-color: #ffffff;
    /*display: inline-block;*/
  }
</style>
